{extend name="property/public/insidePageBase" /}
{block name="title"}控制台{/block}
{block name="css"}
{__block__}
<style>
    .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .icon {margin-right:10px;color:#1aa094;}
    .icon-cray {color:#ffb800!important;}
    .icon-blue {color:#1e9fff!important;}
    .icon-tip {color:#ff5722!important;}
    .layuimini-qiuck-module {text-align:center;margin-top: 10px}
    .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome-module {width:100%;height:210px;}
    .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:10px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
    .layui-bg-number {background-color:#F8F8F8;}
    .layuimini-notice:hover {background:#f6f6f6;}
    .layuimini-notice {padding:6.5px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .layuimini-notice-title,.layuimini-notice-label {
        padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
    .layuimini-notice-title {line-height:28px;font-size:14px;}
    .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
</style>
{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md4">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>能耗数据统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">总数</span>
                                                        <h5>电表数量</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"  id="">0</h1>
                                                        <small>台</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">220V</span>
                                                        <h5>单相电表</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"  id="">0</h1>
                                                        <small>台</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">380V</span>
                                                        <h5>三相电表</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"  id="">0</h1>
                                                        <small>台</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">总数</span>
                                                        <h5>本月用电量</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"  id="">0</h1>
                                                        <small>KWH</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">实时</span>
                                                        <h5>昨日用电量</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"  id="">0</h1>
                                                        <small>KWH</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">实时</span>
                                                        <h5>本周用电量</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"  id="">0</h1>
                                                        <small>KWH</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>账单金额统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">

                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">实时</span>
                                                        <h5>账单总数</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"  id="bill_num">0</h1>
                                                        <small>会员</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-green">实时</span>
                                                        <h5>逾期数量</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"  id="overdue_num">0</h1>
                                                        <small>总数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-blue">实时</span>
                                                        <h5>作废数量</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" id="invalid_num">0</h1>
                                                        <small>单数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">本月</span>
                                                        <h5>已收金额</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"  id="bill_received_amount">0.00</h1>
                                                        <small>元</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-green">本月</span>
                                                        <h5>待收金额</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"  id="bill_to_be_received_amount">0.00</h1>
                                                        <small>元</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-blue">本月</span>
                                                        <h5>应收金额</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" id="bill_amount">0.00</h1>
                                                        <small>元</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>用户数据统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">实时</span>
                                                        <h5>今日新增</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"  id="today_user_num">0</h1>
                                                        <small>会员</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-green">实时</span>
                                                        <h5>会员数量</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"  id="total_user_num">0</h1>
                                                        <small>总数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-blue">实时</span>
                                                        <h5>今日收款</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" id="today_bill_pay_num">0</h1>
                                                        <small>单数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-cyan">实时</span>
                                                        <h5>今日收款</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"  id="today_bill_pay_money">0.00</h1>
                                                        <small>总额</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-warning icon"></i>月度账单统计</div>
                    <div class="layui-card-body">
                        <div id="property-room-a" style="width: 100%;min-height:400px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-warning icon"></i>物业房间统计</div>
                    <div class="layui-card-body">
                        <div id="property-room-count" style="width: 100%;min-height:400px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-warning icon"></i>电表余额信息</div>
                    <div class="layui-card-body">
                        <div id="property-room-c" style="width: 100%;min-height:400px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['echarts'], function () {
        var $ = layui.jquery, echarts = layui.echarts;
        /**
         *  资产状态统计图（饼图）数据来自固定资产条码表
         */
        var monthBillEchart = echarts.init(document.getElementById('property-room-a'), 'walden');
        getMonthBillEchartsCount();
        function getMonthBillEchartsCount() {
            $.get("{:url('propertyIndex')}", function (res) {
                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    color:[
                        '#5470c6',
                        '#91cc75',
                        '#fac858',
                        '#ee6666'
                    ],
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            propertytyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 1048, name: '己逾期账单' },
                                { value: 735, name: '7天内到期账单' },
                                { value: 580, name: '其它未收账单' },
                                { value: 484, name: '己收款账单' },
                            ]
                        }
                    ]
                };

                monthBillEchart.setOption(option);
                // echarts 窗口缩放自适应
                window.onresize = function(){
                    monthBillEchart.resize();
                }
            })
        }



        /**
         * 资产分类统计图（饼图）数据来自资产信息表
         * AssetCate
         */
        /**
         * 报表功能
         */
        var propertyRoomCountEchart = echarts.init(document.getElementById('property-room-count'), 'walden');
        getEchartsCount();
        function getEchartsCount() {
            $.get("{:url('propertyIndexStatistics')}", function (res) {
                if (res.code === 0) {
                    $('#today_user_num').html(res.data.today_user_num)
                    $('#total_user_num').html(res.data.total_user_num)
                    $('#today_bill_pay_num').html(res.data.today_bill_pay_num)
                    $('#today_bill_pay_money').html(res.data.today_bill_pay_money)
                    let propertyNames = []
                    let vacantNums = []
                    let rentNums = []
                    let roomNums = []
                    let rentPers = []
                    res.data.propertyData.forEach((item) => {
                        propertyNames.push(item.property_name)
                        vacantNums.push(item.vacant_num)
                        rentNums.push(item.rent_num)
                        roomNums.push(item.room_num)
                        if(item.room_num > 0) {
                            rentPers.push(((item.rent_num / item.room_num).toFixed(4))*100)
                        } else {
                            rentPers.push(0)
                        }
                    })
                    console.log(rentPers)
                    option = {
                        tooltip: {
                            trigger: "axis",
                            axisPointer: {
                                type: "cross"
                            },
                            padding: [5, 10]
                        },
                        legend: {
                            right: 'center',
                            top: 0,
                            data: ['空置中', '租赁中','出租率']
                        },
                        calculable: true,
                        grid: {
                            left: 10,
                            right: 0,
                            bottom: 20,
                            top: 30,
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: propertyNames,
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '房间数',
                                max: (arrayMax(roomNums)-arrayMin(roomNums))/arrayMax(roomNums) < 0.4 ? arrayMax(roomNums)+parseInt(arrayMax(roomNums)*0.5) : null
                            },
                            {
                                type: 'value',
                                name: '出租率',
                                max: arrayMax(rentPers)+10,
                                min: arrayMin(rentPers),
                                splitLine: {
                                    show: false
                                }
                            }
                        ],
                        series: [
                            {
                                name: '空置中',
                                type: 'bar',
                                stack: 'total',
                                label: {
                                    show: true
                                },
                                data: vacantNums
                            },
                            {
                                name: '租赁中',
                                type: 'bar',
                                stack: 'total',
                                label: {
                                    show: true
                                },
                                data: rentNums
                            },
                            {
                                name: '出租率',
                                yAxisIndex: 1,
                                data: rentPers,
                                smooth: false,
                                legendHoverLink: false,
                                animationDuration: 2800,
                                animationEasing: "quadraticOut",
                                type: 'line'
                            },
                            {
                                name: '房间数',
                                type: 'pie',
                                center: ['85%', '20%'],
                                radius: '28%',
                                z: 100,
                                left: 10,
                                data: [
                                    {
                                        name: '空置中',
                                        value: arraySum(vacantNums)
                                    },{
                                        name: '租赁中',
                                        value: arraySum(rentNums)
                                    }
                                ]
                            }
                        ]
                    };

                    propertyRoomCountEchart.setOption(option);

                    // echarts 窗口缩放自适应
                    window.onresize = function(){
                        propertyRoomCountEchart.resize();
                    }
                }
            })
        }
        /**
         * 电表余额信息
         * AssetCate
         */
        var assetListEchart = echarts.init(document.getElementById('property-room-c'), 'walden');
        getAssetListEchartsCount();
        function getAssetListEchartsCount() {
            $.get("{:url('propertyIndex')}", function (res) {
                // if (res.code === 0) {
                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    color:[
                        '#5470c6',
                        '#91cc75',
                        '#fac858',
                        '#ee6666'
                    ],

                    series: [
                        {
                            name: '数据来源（余额可满足15天用电）',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                { value: 1048, name: '欠费停电电表' },
                                { value: 735, name: '余额充足电表' },
                                { value: 580, name: '余额不足电表' },
                                { value: 484, name: '欠费用电电表' },
                            ],
                            emphasis: {
                                propertytyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                assetListEchart.setOption(option);
                // echarts 窗口缩放自适应
                window.onresize = function(){
                    assetListEchart.resize();
                }
                // }
            })
        }

        function arrayMin(arrs) {
            var min = arrs[0];
            for (var i = 1, ilen = arrs.length; i < ilen; i += 1) {
                if (arrs[i] < min) {
                    min = arrs[i];
                }
            }
            return min;
        }

        function arrayMax(arrs) {
            var max = arrs[0];
            for (var i = 1, ilen = arrs.length; i < ilen; i++) {
                if (Number(arrs[i]) > max) {
                    max = arrs[i];
                }
            }
            return max;
        }
        function arraySum(arr) {
            var s = 0;
            for (var i=arr.length-1; i>=0; i--) {
                s += arr[i];
            }
            return s;
        }
    });
</script>
{/block}